<template>
  <!-- 新增、修改施工区域信息 -->
  <base-modal
    :title="pageType === 'edit' ? '施工区域编辑': '施工区域添加'"
    cancelText="取消"
    okText="保存"
    :width="800"
    v-on="$listeners"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="formInfo">
      <!-- 第一行(所属分公司、所属项目) -->
      <a-row :gutter="24">
        <a-col :md="12" :sm="12">
          <a-form-item
            label="所属分公司"
            :labelCol="{ lg: { span: 6 }, sm: { span: 5 } }"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
          >
            <a-select placeholder="请选择所属分公司" v-decorator="['companyName']">
              <!-- <a-select-option value="0">是</a-select-option>
              <a-select-option value="1">否</a-select-option>-->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-item
            label="所属项目"
            :labelCol="{ lg: { span: 6 }, sm: { span: 5 } }"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
          >
            <a-select placeholder="请选择所属项目" v-decorator="['projectName']">
              <!-- <a-select-option value="0">是</a-select-option>
              <a-select-option value="1">否</a-select-option>-->
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 第二行(分类名称、分包商) -->
      <a-row :gutter="24">
        <a-col :md="12" :sm="12">
          <a-form-item
            label="分类名称"
            :labelCol="{ lg: { span: 6 }, sm: { span: 5 } }"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
          >
            <BaseInput placeholder="请输入分类名称" v-decorator="['classifyName']" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-item
            label="分包商"
            :labelCol="{ lg: { span: 6 }, sm: { span: 5 } }"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
          >
            <a-select placeholder="请选择分包商" v-decorator="['subBusiness']">
              <!-- <a-select-option value="0">是</a-select-option>
              <a-select-option value="1">否</a-select-option>-->
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 第三行(安全责任人、状态) -->
      <a-row :gutter="24">
        <a-col :md="12" :sm="12">
          <a-form-item
            label="安全责任人"
            :labelCol="{ lg: { span: 6 }, sm: { span: 5 } }"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
          >
            <a-tree-select
              v-decorator="['responsible']"
              show-search
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="Please select"
              allow-clear
              tree-default-expand-all
            >
              <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
                <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
                  <a-tree-select-node
                    key="random"
                    :selectable="false"
                    value="leaf1"
                    title="my leaf"
                  />
                  <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
                </a-tree-select-node>
                <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
                  <a-tree-select-node key="random3" value="sss">
                    <b slot="title" style="color: #08c">sss</b>
                  </a-tree-select-node>
                </a-tree-select-node>
              </a-tree-select-node>
            </a-tree-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-item
            label="状态"
            :labelCol="{ lg: { span: 6 }, sm: { span: 5 } }"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
          >
            <a-select placeholder="请选择状态" v-decorator="['status']">
              <!-- <a-select-option value="0">是</a-select-option>
              <a-select-option value="1">否</a-select-option>-->
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </base-modal>
</template>

<script>
import BaseModal from '@/components/BaseModal'
export default {
    name:'a'+Date.now(),  components: {
    BaseModal,
  },
  data() {
    return {
      pageType: 'add',
      formInfo: this.$form.createForm(this, { name: 'updateForm' }),
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    handleOk() {
      this.$emit('ok')
    },
  },
}
</script>

<style lang="less" scoped>
.select-icon {
  margin-left: 12px;
  font-size: 20px;
}
</style>